<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>委托单管理</title>
	<meta name="decorator" content="ani"/>
	<script type="text/javascript">
		var validateForm;
		var $table; // 父页面table表格id
		var $topIndex;//弹出窗口的 index
		function doSubmit(table, index){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
		  if(validateForm.form()){
			  $table = table;
			  $topIndex = index;
			  jp.loading();
			  $("#inputForm").submit();
			  return true;
		  }

		  return false;
		}

		$(document).ready(function() {
			validateForm = $("#inputForm").validate({
				submitHandler: function(form){
					jp.post("${ctx}/tms/transportPlanning/save",$('#inputForm').serialize(),function(data){
						if(data.success){
	                    	$table.bootstrapTable('refresh');
	                    	jp.success(data.msg);
	                    	jp.close($topIndex);//关闭dialog

	                    }else{
            	  			jp.error(data.msg);
	                    }
					})
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			
	        $('#date').datetimepicker({
				 format: "YYYY-MM-DD HH:00"
		    });
	        $('#deliveryTime').datetimepicker({
				 format: "YYYY-MM-DD HH:00"
		    });
	        $('#arrivalTime').datetimepicker({
				 format: "YYYY-MM-DD HH:00"
		    });
	        $('#stowageDate').datetimepicker({
				 format: "YYYY-MM-DD HH:00"
		    });
	        $('#presentTime').datetimepicker({
				 format: "YYYY-MM-DD HH:00"
		    });
		});
		
		function addRow(list, idx, tpl, row){
			$(list).append(Mustache.render(tpl, {
				idx: idx, delBtn: true, row: row
			}));
			$(list+idx).find("select").each(function(){
				$(this).val($(this).attr("data-value"));
			});
			$(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
				var ss = $(this).attr("data-value").split(',');
				for (var i=0; i<ss.length; i++){
					if($(this).val() == ss[i]){
						$(this).attr("checked","checked");
					}
				}
			});
			$(list+idx).find(".form_datetime").each(function(){
				 $(this).datetimepicker({
					 format: "YYYY-MM-DD HH:00"
			    });
			});
		}
		function delRow(obj, prefix){
			var id = $(prefix+"_id");
			var delFlag = $(prefix+"_delFlag");
			if (id.val() == ""){
				$(obj).parent().parent().remove();
			}else if(delFlag.val() == "0"){
				delFlag.val("1");
				$(obj).html("&divide;").attr("title", "撤销删除");
				$(obj).parent().parent().addClass("error");
			}else if(delFlag.val() == "1"){
				delFlag.val("0");
				$(obj).html("&times;").attr("title", "删除");
				$(obj).parent().parent().removeClass("error");
			}
		}
	</script>
</head>
<body class="bg-white">
<form:form id="inputForm" modelAttribute="transportPlanning" action="${ctx}/tms/transportPlanning/save" method="post" class="form-horizontal">
	<form:hidden path="id"/>
	<sys:message content="${message}"/>
	<ul class="nav nav-tabs">
		<li class="active"><a data-toggle="tab" href="#tab-01" aria-expanded="true">订单详情</a>
		</li>
		<li class=""><a data-toggle="tab" href="#tab-02" aria-expanded="true">服务信息</a>
		</li>
		<li class=""><a data-toggle="tab" href="#tab-03" aria-expanded="true">分配明细</a>
		</li>
	</ul>
	<div class="tab-content">
		<div id="tab-01" class="tab-pane fade in  active">
			<table class="table table-bordered">
				<tbody>
				<tr>
					<td class="width-10 active"><label class="pull-right">装运单号：</label></td>
					<td class="width-23">
						<form:input path="shipmentNumbers" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-10 active"><label class="pull-right">下单日期：</label></td>
					<td class="width-23">
						<div class='input-group form_datetime' id='date'>
							<input type='text'  name="date" class="form-control "  value="<fmt:formatDate value="${transportPlanning.date}" pattern="yyyy-MM-dd HH:00"/>"/>
							<span class="input-group-addon">
			                        <span class="glyphicon glyphicon-calendar"></span>
			                    </span>
						</div>
					</td>
					<td class="width-10 active"><label class="pull-right">要求发货时间：</label></td>
					<td class="width-23">
						<div class='input-group form_datetime' id='deliveryTime'>
							<input type='text'  name="deliveryTime" class="form-control "  value="<fmt:formatDate value="${transportPlanning.deliveryTime}" pattern="yyyy-MM-dd HH:00"/>"/>
							<span class="input-group-addon">
			                        <span class="glyphicon glyphicon-calendar"></span>
			                    </span>
						</div>
					</td>
				</tr>
				<tr>
					<td class="width-10 active"><label class="pull-right">收货详细地址：</label></td>
					<td class="width-23">
						<form:input path="site" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-10 active"><label class="pull-right">到站省：</label></td>
					<td class="width-23">
						<form:input path="arriveProvince" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-10 active"><label class="pull-right">到站地城市：</label></td>
					<td class="width-23">
						<form:input path="arriveCity" htmlEscape="false"    class="form-control "/>
					</td>
				</tr>
				<tr>

					<td class="width-10 active"><label class="pull-right">收货单位名称：</label></td>
					<td class="width-23">
						<form:input path="unitName" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-10 active"><label class="pull-right">收货单位确认人：</label></td>
					<td class="width-23">
						<form:input path="unitConfirmor" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-10 active"><label class="pull-right">确认人电话：</label></td>
					<td class="width-23">
						<form:input path="phone" htmlEscape="false"    class="form-control "/>
					</td>
				</tr>

				<tr>

					<td class="width-10 active"><label class="pull-right">合同里程：</label></td>
					<td class="width-23">
						<form:input path="distance" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-10 active"><label class="pull-right">运输线路：</label></td>
					<td class="width-23">
						<form:input path="transitLines" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-10 active"><label class="pull-right">起运地：</label></td>
					<td class="width-23">
						<form:input path="contractDistance" htmlEscape="false"    class="form-control "/>
					</td>
				</tr></tbody></table>
			<div class="tabs-container">
				<ul class="nav nav-tabs">
						<%--<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">附加费用：</a>--%>
						<%--</li>--%>
					<li class="active"><a data-toggle="tab" href="#tab-2" aria-expanded="true">物料信息：</a>
					</li>
				</ul>
				<div class="tab-content">
					<div id="tab-2" class="tab-pane fade in  active">
						<a class="btn btn-white btn-sm" onclick="addRow('#materialInformationsList', materialInformationsRowIdx, materialInformationsTpl);materialInformationsRowIdx = materialInformationsRowIdx + 1;" title="新增"><i class="fa fa-plus"></i> 新增</a>
						<table class="table table-striped table-bordered table-condensed">
							<thead>
							<tr>
								<th class="hide"></th>
								<th width="10%"><span style="color: red">*</span>提货单号</th>
								<th width="14%"><span style="color: red">*</span>物料编码</th>
								<th width="28%"><span style="color: red">*</span>物料名称</th>
								<th width="8%">物料规格</th>
								<th width="6%">物料类型</th>
								<th width="6%">计划量</th>
								<th width="6%"><span style="color: red">*</span>派车量</th>
								<th width="6%">毛重(吨)</th>
								<th width="6%">体积(M3)</th>
								<th width="14%"><span style="color: red">*</span>提货仓库</th>

								<th width="10">&nbsp;</th>
							</tr>
							</thead>
							<tbody id="materialInformationsList">
							</tbody>
						</table>
						<script type="text/template" id="materialInformationsTpl">//<!--
				<tr id="materialInformationsList{{idx}}">
					<td class="hide">
						<input id="materialInformationsList{{idx}}_id" name="materialInformationsList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
						<input id="materialInformationsList{{idx}}_delFlag" name="materialInformationsList[{{idx}}].delFlag" type="hidden" value="0"/>
					</td>

					<td>
						<input id="materialInformationsList{{idx}}_number" name="materialInformationsList[{{idx}}].number" type="text" value="{{row.number}}"    class="form-control "/>
					</td>





					<td>
						<input id="materialInformationsList{{idx}}_coding" name="materialInformationsList[{{idx}}].coding" type="text" value="{{row.coding}}"    class="form-control "/>
					</td>
<td>
						<sys:gridselect url="${ctx}/infor/goods/data" id="materialInformationsList{{idx}}_goods" name="materialInformationsList[{{idx}}].goods.id" value="{{row.goods.id}}" labelName="materialInformationsList{{idx}}.goods.name" labelValue="{{row.goods.name}}"
							 title="选择物料名称" cssClass="form-control  " fieldLabels="名称" fieldKeys="name" searchLabels="名称" searchKeys="name" ></sys:gridselect>
					</td>

					<td>
						<input id="materialInformationsList{{idx}}_specification" name="materialInformationsList[{{idx}}].specification" type="text" value="{{row.specification}}"    class="form-control "/>
					</td>


					<td>
						<input id="materialInformationsList{{idx}}_type" name="materialInformationsList[{{idx}}].type" type="text" value="{{row.type}}"    class="form-control "/>
					</td>


					<td>
						<input id="materialInformationsList{{idx}}_gross" name="materialInformationsList[{{idx}}].gross" type="text" value="{{row.gross}}"    class="form-control "/>
					</td>


					<td>
						<input id="TmsMaterialsInformationList{{idx}}_vehicleQuantity" name="materialInformationsList[{{idx}}].vehicleQuantity" type="text" value="{{row.vehicleQuantity}}"    class="form-control "/>
					</td>


					<td>
						<input id="materialInformationsList{{idx}}_weight" name="materialInformationsList[{{idx}}].weight" type="text" value="{{row.weight}}"    class="form-control "/>
					</td>


					<td>
						<input id="materialInformationsList{{idx}}_volume" name="materialInformationsList[{{idx}}].volume" type="text" value="{{row.volume}}"    class="form-control "/>
					</td>


					<td>
						<input id="materialInformationsList{{idx}}_depot" name="materialInformationsList[{{idx}}].depot" type="text" value="{{row.depot}}"    class="form-control "/>
					</td>




					<td class="text-center" width="10">
						{{#delBtn}}<span class="close" onclick="delRow(this, '#materialInformationsList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
					</td>
				</tr>//-->
						</script>
						<script type="text/javascript">
                            var materialInformationsRowIdx = 0, materialInformationsTpl = $("#materialInformationsTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                            $(document).ready(function() {
                                var data = ${fns:toJson(transportPlanning.materialInformationsList)};
                                for (var i=0; i<data.length; i++){
                                    addRow('#materialInformationsList', materialInformationsRowIdx, materialInformationsTpl, data[i]);
                                    materialInformationsRowIdx = materialInformationsRowIdx + 1;
                                }
                            });
						</script>
					</div>
				</div>
			</div>
		</div>
		<div id="tab-02" class="tab-pane fade">

			<table class="table table-bordered"><tbody>
			<tr>
				<td class="width-10 active"><label class="pull-right">委托单号：</label></td>
				<td class="width-23">
					<form:input path="entrustNumber" htmlEscape="false"    class="form-control "/>
				</td>
				<td class="width-10 active"><label class="pull-right">项目名称：</label></td>
				<td class="width-23">
					<form:input path="projectName" htmlEscape="false"    class="form-control "/>
				</td>
				<td class="width-10 active"><label class="pull-right">委托单状态：</label></td>
				<td class="width-23">
					<form:input path="status" htmlEscape="false"    class="form-control "/>
				</td>
			</tr>
			<tr>
				<td class="width-10 active"><label class="pull-right">运输方式：</label></td>
				<td class="width-23">
					<form:input path="transportMode" htmlEscape="false"    class="form-control "/>
				</td>
				<td class="width-10 active"><label class="pull-right">结算方式：</label></td>
				<td class="width-23">
					<form:input path="clearingMode" htmlEscape="false"    class="form-control "/>
				</td>
				<td class="width-10 active"><label class="pull-right">结算类型：</label></td>
				<td class="width-23">
					<form:input path="clearingType" htmlEscape="false"    class="form-control "/>
				</td>
			</tr>
			<tr>


				<td class="width-10 active"><label class="pull-right">要求到货时间：</label></td>
				<td class="width-23">
					<p class="input-group">
					<div class='input-group form_datetime' id='arrivalTime'>
						<input type='text'  name="arrivalTime" class="form-control "  value="<fmt:formatDate value="${transportPlanning.arrivalTime}" pattern="yyyy-MM-dd HH:00"/>"/>
						<span class="input-group-addon">
			                        <span class="glyphicon glyphicon-calendar"></span>
			                    </span>
					</div>
					</p>



				</td>
				<td class="width-10 active"><label class="pull-right">备注信息：</label></td>
				<td class="width-23">
					<form:input path="remarks" htmlEscape="false"     class="form-control "/>
				</td>
			</tr>
			</tbody></table>
			<div style="height: 60px;"></div>
			<table class="table table-bordered" <c:if test="${list==null}">hidden="hidden"</c:if>>
				<tr>
					<th>物料类别</th>
					<th>计划量</th>
					<th>毛重</th>
					<th>体积</th>
					<th>提货仓库</th>
				</tr>
				<c:forEach items="${list}" var="map">
					<tr>
						<td>${map.type}</td>
						<td>${map.gross}</td>
						<td>${map.weight}</td>
						<td>${map.volume}</td>
						<td>${map.depot}</td>
					</tr>
				</c:forEach>
			</table>
		</div>
		<div id="tab-03" class="tab-pane fade">
			<div style="height:80px;"></div>
			<table class="table table-bordered">
				<tr>
					<th>序号</th>
					<th>运单号</th>
					<th>车牌号</th>
					<th>运单状态</th>
					<th>运输线路</th>
					<th>提货单号</th>
					<th>物料名称</th>
					<th>派车量</th>
					<th>装车量</th>
					<th>毛重</th>
					<th>提货仓库</th>
				</tr>
				<c:forEach var="bill" items="${bills}"  varStatus="index">
					<c:forEach var="a" items="${bill.tmsMaterialsInformationList}" varStatus="idx" >
						<c:if test="${idx.index==0}">
							<tr>
								<td>${index.index+1}</td>
								<td>${bill.code}</td>
								<td>${bill.plateNumber}</td>
								<td>${bill.billStatus}</td>
								<td>${bill.transitLines}</td>
								<td>${a.number}</td>
								<td>${a.name.name}</td>
								<td>${a.vehicleQuantity}</td>
								<td>${a.loadingQuantity}</td>
								<td>${a.weight}</td>
								<td>${a.depot}</td>
							</tr>
						</c:if>
						<c:if test="${idx.index!=0}">
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td>${a.number}</td>
								<td>${a.name.name}</td>
								<td>${a.vehicleQuantity}</td>
								<td>${a.loadingQuantity}</td>
								<td>${a.weight}</td>
								<td>${a.depot}</td>
							</tr>
						</c:if>

					</c:forEach>
				</c:forEach>
			</table>
		</div>
	</div>
</form:form>
</body>
</html>